<template>
  <div>
    <NavHeader></NavHeader>

    <div class="commodity">
      <!-- 图片区域 -->
      <div class="picture">
        <div class="bigIMG">
          <Getbig :width="486" :height="486" :minIMGsrc="bigimgurl" :scale="3">
          </Getbig>
        </div>
        <ul class="smallIMG">
          <li
            v-for="(item, index) in goodlist"
            :key="item.id"
            :class="{ active: index == isActive }"
            @mouseenter="handleChange(index, $event)"
          >
            <img v-lazy="item.path" alt="" />
          </li>
        </ul>
      </div>
      <!-- 产品信息选择区域 -->
      <div class="detail-product">
        <div class="product">
          <!-- 产品标题 -->
          <div class="product-title">
            <h3>{{ product.desc }}</h3>
            <p class="product-text">
              【赠真无线蓝牙耳机 | 学生认证领券减50元 | 享12期免息 |
              享300元大礼包 | 购机返2倍积分 | 晒单至高返 1万积分 |
              老用户尊享半年欢太 x 爱奇艺联合会员】
            </p>
            <p class="product-text2">
              ①6400万水光人像镜头，前置3200万像素自拍；②65W超级闪充，快与安全；
              ③90Hz高感屏，流畅顺滑；④36个月流畅护航，五级抗老化认证。
            </p>
            <p class="product-text">
              <a href="">以旧换新最高额外补贴2100元 >>></a>
            </p>
            <p class="product-price">
              <span class="price">{{ `￥${product.price}` }}</span>
              <span class="sale_price">{{ `￥${product.sale_price}` }}</span>
            </p>
            <p class="product-tips">
              <span class="tips-title">商品支持:</span
              ><span class="tips-flower"
                ><img v-lazy="icon0" alt="" />花呗分期3/6/12期</span
              >
              <span class="tips-new"
                ><img v-lazy="icon1" alt="" /> 以旧换新
              </span>
              <span class="tips-up"
                ><img v-lazy="icon2" alt="" />门店送货上面<img
                  v-lazy="icon3"
                  alt=""
              /></span>
            </p>
          </div>
          <p class="config-name">颜色</p>
          <div class="btn-list">
            <div
              class="co-radio"
              :class="{ active: isActive2 == 1 }"
              @click="isActive2 = 1"
            >
              <span>夜海</span>
            </div>
            <div
              class="co-radio"
              :class="{ active: isActive2 == 2 }"
              @click="isActive2 = 2"
            >
              <span>夏日晴海</span>
            </div>
            <div
              class="co-radio"
              :class="{ active: isActive2 == 3 }"
              @click="isActive2 = 3"
            >
              <span>星河入梦</span>
            </div>
          </div>
          <p class="config-name">配置</p>
          <div class="btn-list2">
            <div
              class="co-radio"
              :class="{ active: isActive3 == 1 }"
              @click="isActive3 = 1"
            >
              <span>8G+128G</span>
            </div>
            <div
              class="co-radio"
              :class="{ active: isActive3 == 2 }"
              @click="isActive3 = 2"
            >
              <span>12G+256G</span>
            </div>
          </div>
          <p class="config-name">服务</p>
          <div class="btn-list3">
            <div
              class="co-radio"
              :class="{ active: isActive4 == 1 }"
              @click="isActive4 = 1"
            >
              <span>屏碎保一年￥143</span>
            </div>
            <div
              class="co-radio"
              :class="{ active: isActive4 == 2 }"
              @click="isActive4 = 2"
            >
              <span>O享无忧￥158</span>
            </div>
          </div>
          <p class="config-name">选择数量</p>
          <div class="input-number">
            <span @click="count--">-</span
            ><input type="text" :value="count" /><span @click="count++">+</span>
          </div>
          <div class="buy-btn">
            <div class="buy-cart">
              <a href="javascript:;">加入购物车</a>
            </div>
            <div class="buy-list">
              <a href="javascript:;" @click="addCart">立即购买</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 吸顶的导航栏 -->
      <!-- <Buy :msg="msg"></Buy> -->
      <!-- 产品详细 -->
    </div>

    <div class="msg">
      <div><Buy :msg="msg" class="buy-top"></Buy></div>
      <div v-html="goods" class="haha" ref="hehe"></div>
    </div>
    <NavFooter></NavFooter>
  </div>
</template>

<script>
import NavHeader from "@/components/NavHeader2.vue";
import NavFooter from "@/components/NavFooter.vue";
import Getbig from "../components/Getbig.vue";
import Buy from "../components/Buy.vue";
import { getDetailgoods, getCart } from "../assets/request";
export default {
  components: { Getbig, Buy, NavHeader, NavFooter },
  data() {
    return {
      isActive: 0,
      goodlist: [],
      bigimgurl: "",
      product: {},
      iconlist: [],
      icon0: "",
      icon1: "",
      icon2: "",
      icon3: "",
      msg: "",
      goods: "",
      isActive2: 2,
      isActive3: 1,
      isActive4: 1,
      count: 1,
    };
  },
  async created() {
    // 先拿到传递过来的id,并请求数据
    console.log(this.$route.params.id);
    let res = await getDetailgoods(this.$route.params.id);
    this.goods = res.rich_text;
    this.msg = res;
    this.product = res;
    this.goodlist = res.s_goods_photos.slice(1, 7);
    console.log(this.product);
    this.bigimgurl = this.goodlist[0].path;
    let icon = await getDetailgoods(957);
    this.iconlist = icon.s_goods_photos;
    this.icon0 = this.iconlist[0].path;
    this.icon1 = this.iconlist[1].path;
    this.icon2 = this.iconlist[2].path;
    this.icon3 = this.iconlist[3].path;
  },
  updated() {
    let obj = this.$refs.hehe;
    let imgs = obj.querySelectorAll("p");
    imgs.forEach((element) => {
      element.style.width = "1226px";
      element.style.margin = "0 auto";
    });
  },
  methods: {
    async addCart() {
      // 将商品添加到购物车中 要发送请求
      this.$router.push("/card");
      await getCart({
        num: 1,
        goods_id: this.$route.params.id,
      });
    },
    handleChange(index, e) {
      this.isActive = index;
      this.bigimgurl = e.target.children[0].src;
    },
  },
};
</script>

<style lang="scss" scoped>
.commodity {
  width: 1200px;
  height: 1200px;
  display: flex;
  margin: 0 auto;
  .picture {
    width: 600px;
    height: 700px;
    // background: skyblue;
    padding-top: 60px;
    .bigIMG {
      width: 486px;
      height: 486px;
      margin: 0 auto;
      // border: 1px solid black;
      // background: yellow;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .smallIMG {
      width: 486px;
      margin: 20px auto;
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        width: 60px;
        height: 60px;

        opacity: 0.2;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .active {
        opacity: 1;
        border: 2px solid gray;
      }
    }
  }
  .detail-product {
    width: 600px;
    height: 700px;
    // background: pink;
    padding-top: 80px;
    padding-left: 68px;

    .product {
      width: 492px;
      height: 278px;
      background: #fff;
      border-bottom: 1px solid #ededed;
      h3 {
        font-size: 22px;
        line-height: 39px;
        margin-bottom: 7px;
        font-weight: 500;
        color: #333;
      }
      .product-text {
        font-size: 14px;
        line-height: 22px;
        color: rgb(247, 154, 71);
        margin-bottom: 12px;
        font-weight: 500;
        a {
          color: #f79a47;
          text-decoration: underline;
        }
      }
      .product-text2 {
        color: rgb(102, 102, 102);
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 12px;
        font-weight: 500;
      }
      .product-price {
        margin-bottom: 20px;
        .price {
          font-size: 26px;
          line-height: 30px;
          margin-right: 20px;
          margin-bottom: 20px;
          color: #333;
        }
        .sale_price {
          font-size: 26px;
          line-height: 30px;
          margin-bottom: 20px;
          color: #a0a0a0;
          text-decoration: line-through;
        }
      }
      .product-tips {
        font-size: 14px;
        margin-bottom: 30px;
        .tips-title {
          font-weight: 500;
          color: #f79a47;
        }
        .tips-flower {
          img {
            vertical-align: middle;
            margin-left: 5px;
            margin-right: 5px;
            margin-bottom: 3px;
          }
        }
        .tips-new {
          img {
            vertical-align: middle;
            margin-left: 5px;
            margin-right: 5px;
            margin-bottom: 3px;
          }
        }
        .tips-up {
          img {
            vertical-align: middle;
            margin-left: 5px;
            margin-right: 5px;
            margin-bottom: 3px;
          }
        }
      }
    }
    .config-name {
      font-size: 14px;
      color: #666;
      margin-top: 30px;
      margin-bottom: 20px;
    }
    .btn-list {
      width: 512px;
      height: 128px;
      margin: -10px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .co-radio {
        width: 234px;
        height: 44px;
        border-radius: 4px;
        cursor: pointer;
        border: 1px solid #dce1e4;
        margin: 10px;
        color: #333;
        font-size: 14px;
        text-align: center;
        line-height: 44px;
      }
      .active {
        border: 1px solid #81cdb1;
      }
    }
    .btn-list2 {
      width: 512px;
      height: 128px;
      margin: -10px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .co-radio {
        width: 234px;
        height: 44px;
        border-radius: 4px;
        cursor: pointer;
        border: 1px solid #dce1e4;
        margin: 10px;
        color: #333;
        font-size: 14px;
        text-align: center;
        line-height: 44px;
      }
      .active {
        border: 1px solid #81cdb1;
      }
    }
    .btn-list3 {
      width: 512px;
      height: 128px;
      margin: -10px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .co-radio {
        width: 234px;
        height: 44px;
        border-radius: 4px;
        cursor: pointer;
        border: 1px solid #dce1e4;
        margin: 10px;
        color: #333;
        font-size: 14px;
        text-align: center;
        line-height: 44px;
      }
      .active {
        border: 1px solid #81cdb1;
      }
    }
    .input-number {
      width: 196px;
      height: 44px;
      box-sizing: border-box;
      border: 1px solid gray;
      border-radius: 5px;
      display: flex;
      span {
        display: inline-block;
        width: 71px;
        height: 44;
        text-align: center;
        line-height: 44px;
        font-size: 26px;
        cursor: pointer;
      }
      input {
        display: inline-block;
        width: 71px;
        height: 42px;
        text-align: center;
        border: none;
        outline: none;
      }
    }
    .buy-btn {
      width: 492px;
      height: 161px;
      padding: 50px 0;
      .buy-cart {
        margin: 20px;
        width: 196px;
        display: inline-block;
        background-color: #f4f4f4;
        border-radius: 4px;
        text-align: center;
        a {
          height: 60px;
          line-height: 60px;
          color: #666;
          font-size: 16px;
        }
      }
      .buy-list {
        margin: 20px;
        width: 196px;
        display: inline-block;
        background-color: #f34141;
        border-radius: 4px;
        text-align: center;
        a {
          height: 60px;
          line-height: 60px;
          color: #fff;
          font-size: 16px;
        }
      }
    }
  }
}
.btn {
  display: inline-block;
  width: 100px;
  height: 50px;
  border: 1px solid black;
  background: skyblue;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
}
// .buy-top {
//   margin-top: 60px;
// }
</style>